<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script src="./libs/babel.min.js"></script>
    <script type="text/babel">
      const { useState, useEffect } = React;
      // function App(props){...}
      const App = (props) => {
        console.log("组件被重新渲染了");
        // useState对前面的会进行数据缓存，他们不会更新，否则会出现死循环
        const [list, setList] = useState([]);
        const [count, setCount] = useState(0);
        const [page, setPage] = useState(1);

        /* useEffect(() => {
          console.count("我是1"); // 我是1: 1
          loadMore();
        }, []); */
        useEffect(() => {
          console.count("我是count，我变了");
        }, [count]);
        useEffect(() => {
          loadMore();
        }, [page]);
        const loadMore = () => {
          fetch("http://localhost:3009/api/v1/products?page=" + page)
            .then((res) => res.json())
            .then((res) => {
              console.log(res.products);
              return setList([...list, ...res.products]);
            });
        };
        /* useEffect(() => {
          console.count("我是list，我变了");
        }, [list]);
        useEffect(() => {
          console.count("我是count和list，我变了");
        }, [count, list]); */
        return (
          <div>
            <h1 onClick={() => setCount(count + 1)}>当前count值为——{count}</h1>
            <ul>
              {list.map((item) => {
                return <li key={item._id}>{item.name}</li>;
              })}
            </ul>
            <button onClick={() => setPage(page + 1)}>点击加载数据</button>
          </div>
        );
      };
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
